<template>
    <div class="container">
        <CustomNav custom-title="性格测试" @click-right="onClickRight" :custom-show="true">
            <template #right>
                <div class="custom-nav-right-btn">
                    <div class="custom-badge"></div>
                    <div>测评记录</div>
                </div>
            </template>
        </CustomNav>
        <div class="content">
            <van-image class="img-banner" fit="cover" position="left" :src="bannerImage"
                @click="() => onItemClick({ id: 1 })" />
            <van-image class="img-top mt-20" fit="fill" position="center" :src="topImage" />
            <div class="item-box">
                <TestItem v-for="item in itemDatas" :itemData="item" @couponClick="onBtnClick"
                    @itemClick="onItemClick" />
            </div>
        </div>


        <PopupBottom ref="PopupBottomRef"></PopupBottom>
    </div>
</template>

<script lang="ts" setup>
import { Ref, onActivated, ref } from 'vue';
import { useRouter } from 'vue-router';
import PopupBottom from '@/pages/components/PopupBottom/index.vue'
import TestItem from '@/pages/components/TestItem/index.vue'
import CustomNav from '@/pages/components/CustomNav/index.vue'
import bannerImage from '@/assets/image/banner.png'
import topImage from '@/assets/image/top.png'
import { TestItemProps } from '../type';
import { postToken, getExams } from '../../api/Home';
import { useTokenStore } from '../../stores/modules/user';
import { utils } from '../../utils';
const router = useRouter()
const tokenStore = useTokenStore();
const PopupBottomRef: Ref<any> = ref(null)
const switchPopup = (id?: number | string) => {
    PopupBottomRef.value?.switchShow(true, id)
}
const itemDatas = ref<TestItemProps[]>([])
const onClickRight = () => router.push('/record');
const onBtnClick = (data: TestItemProps) => switchPopup(data.id);
const onItemClick = (data: TestItemProps) => router.push(`/detail/${data.id}`);

const getExamsFunc = async () => {
    const { code: code2, data: data2 } = await getExams()
    if (`${code2}` === '0') {
        itemDatas.value = data2.map((item: TestItemProps) => ({ ...item, btnType: 1 }))
    }
}
const formtParamsToQuery = (params: any, excludeKey?: string) => {
    const locationHost = window.location.href.split('?')[0]
    let targetUrl = `${locationHost}?`
    Object.keys(params).forEach(key => {
        if (!(excludeKey && key === excludeKey)) {
            targetUrl += `${key}=${params[key]}&`
        }
    })
    return targetUrl.slice(0, -1)
}
const _postToken = async (importURLParams: any) => {
    // 测试用的url后缀
    // game_uid：游戏uid
    // is_verified：用户是否实名认证
    // timestamp ：当前时间戳，单位：毫秒
    // grant_type=SIGN&userId=123&sign=sdfsfd&game_uid=123&is_verified=true&timestamp=
    if (!importURLParams.timestamp) {
        importURLParams.timestamp = `${new Date().getTime()}`
    }
    const { code, data } = await postToken(importURLParams)
    if (`${code}` === '0') {
        tokenStore.setTokenData(data);
        const redirectUrl: string = formtParamsToQuery(importURLParams, 'sign')
        window.location.replace(redirectUrl)
        window.location.reload()
    }
}
onActivated(async () => {
    const importURLParams: any = utils.queryParse(window.location.href)
    if (importURLParams.sign) {
        _postToken({ ...importURLParams })
    } else {
        if (tokenStore.tokenData.access_token) {
            getExamsFunc()
        } else {
            _postToken({ ...importURLParams })

        }
    }
})

</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    overflow: hidden;
    background-color: $color_bg_dark;
    display: flex;
    flex-direction: column;

    .content {
        flex: 1;
        padding: 10px;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        padding-bottom: 30px;

        .img-banner {
            width: 100%;
            height: 130px;
            border-radius: 5px;
        }

        .img-top {
            width: 100%;
        }

        .item-box {}
    }
}

.custom-nav-right-btn {
    color: $color_white;
    font-size: 12px;
    width: 85px;
    height: 26px;
    background-color: $color_blue_light;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 125px;

    .custom-badge {
        width: 8px;
        height: 8px;
        background-color: rgba(0, 238, 255, 1);
        border-radius: 4px;
        margin-right: 5px;
    }
}
</style>